<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            系统概述<i class="header-icon el-icon-info"></i>
          </template>
          <div>1、在前端，使用vue-admin-template脚手架搭建项目，创建前端页面结构，并配置前端路由。</div>
          <div>2、前端页面通过Axios库发送HTTP请求到后端API接口，请求的URL包括后端的IP地址或域名、端口号和具体的API路径。</div>
          <div>3、在后端，根据URL和请求方法匹配对应的Controller和方法进行处理。</div>
          <div>4、后端Controller调用Service层处理业务逻辑，包括使用MyBatis-Plus进行数据库操作和使用Redis进行缓存操作。</div>
          <div>5、后端处理完请求后，将结果封装成JSON格式的数据返回给前端。</div>
          <div>6、前端接收后端返回的数据，并根据业务需求进行页面的渲染和展示。</div>
          <div>7、整个过程通过HTTP协议进行通信，实现了前后端的数据交互和页面展示。</div>

        </el-collapse-item>
        <el-collapse-item title="路由配置">
          <div>1、路由配置文件：路由配置文件位于`src/router`目录下的`index.js`文件。可以在该文件中定义前端路由，并指定每个路由对应的组件和URL路径。</div>
          <div>2、HTTP请求配置文件：HTTP请求配置文件位于`src/utils/request.js`文件中。可以在该文件中配置Axios实例，并设置请求拦截器和响应拦截器。在Axios实例的配置中，可以指定默认的请求URL、请求方法、请求头等信息。</div>
          <div>3、环境配置文件：环境配置文件位于`.env.`文件中，根据开发环境和生产环境进行配置。可以在这些文件中设置后端IP地址和端口号，以及其他环境相关的配置。</div>
          <div>组件中的请求URL：在组件中使用Axios发送请求时，可以直接指定请求的URL路径，可以是相对路径或绝对路径。通常，可以在组件的`methods`中使用Axios发送请求，并在请求的URL中拼接具体的API路径，我们采取在`src/api`目录下定义API请求的方法，在`methods`中调用，使代码逻辑更加清晰。</div>
        </el-collapse-item>
        <el-collapse-item title="Redis缓存">
          <div>1、提高性能：Redis 是一个内存数据库，相比于传统的磁盘数据库，它具有非常高的读写速度。将经常使用的数据缓存到 Redis 中可以大大提高数据访问的速度，减轻数据库的压力，从而提高整体系统的性能和响应速度。</div>
          <div>2、降低数据库负载：数据库是系统中最常遇到的瓶颈之一。通过使用 Redis 缓存，可以将频繁访问的数据存储在内存中，减少对数据库的直接访问，从而降低数据库的负载。这对于高并发的应用程序尤为重要，可以有效地减少数据库的压力，提高系统的承载能力。</div>
          <div>3、减少网络开销：相对于从数据库中获取数据，从 Redis 中获取数据的网络开销更小。Redis 是内存数据库，通常部署在应用程序所在的服务器上，与应用程序之间的网络延迟较低。因此，通过缓存热门数据，可以减少从远程数据库获取数据的网络开销，提高数据的访问速度。</div>
          <div>4、实现数据共享：Redis 支持分布式部署和数据复制，可以将缓存数据存储在多个节点中，实现数据的共享和高可用性。这对于分布式系统和多节点部署的应用程序非常有用，可以确保各个节点之间的数据一致性，并提供容错和故障恢复的机制。</div>
          <div>5、提供丰富的功能：Redis 不仅仅是一个简单的缓存工具，它还提供了丰富的功能和数据结构，如字符串、列表、哈希表、集合、有序集合等。这些功能可以支持更复杂的应用场景，如发布/订阅、计数器、排行榜、消息队列等，为应用程序开发带来更多的灵活性和功能扩展性。</div>
        </el-collapse-item>
        <el-collapse-item title="密码加密存储">
          <div>1、Spring Security 中的 `PasswordEncoder` 接口是用于密码编码和密码验证的。它的主要目的是对用户密码进行安全处理，避免以明文方式存储密码，提高系统的安全性。</div>
          <div>2、`PasswordEncoder` 接口定义了两个主要的方法：</div>
          <div>&nbsp;&nbsp;&nbsp;&nbsp;`encode(CharSequence rawPassword)`：用于将原始密码进行编码，返回编码后的密码字符串。这个方法在用户注册或密码修改时使用。编码后的密码通常包含了加密算法所需的盐值等信息，以提高密码的安全性。</div>
          <div>&nbsp;&nbsp;&nbsp;&nbsp;`matches(CharSequence rawPassword, String encodedPassword)`：用于验证原始密码和已编码密码是否匹配。这个方法在用户登录时使用。它会将用户输入的密码进行编码，并与数据库中存储的已编码密码进行比较，以验证密码的正确性。</div>
          <div>3、Spring Security 提供了多种实现 `PasswordEncoder` 接口的实现类，本系统采用算法如下</div>
          <div>&nbsp;&nbsp;&nbsp;&nbsp;`BCryptPasswordEncoder`：使用 BCrypt 算法对密码进行编码和验证。BCrypt 是一种密码哈希函数，它采用逐渐增加的计算成本，以防止暴力破解攻击</div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
